<script setup>
import teacher_tabbar from '../teacher_tabbar.vue'

const toNext_1 = function () {
  uni.navigateTo({url: '/pages/admin/admin'})
}

const toNext_2 = function () {
  uni.switchTab({url: '/pages/HomePage/HomePage'})
}

const toNext_3 = function () {
  uni.navigateTo({url: '/pages/admin/admin'})
}

const toNext_4 = function () {
  uni.navigateTo({url: '/pages/lianxiren/lianxiren_page'})
}


</script>

<template>
  <teacher_tabbar :current-index="2"/>
  <div class="mobile-page">
    <!-- 主要内容区域 -->
    <main class="py-4 px-3">
      <div class="function-list">
        <!-- 功能项 1 -->
        <div class="function-item" @click="toNext_1">
          <div class="icon-wrapper">
            <img src="../../static/image/img/2191.png" alt="次数排名图标" class="icon-img">
          </div>
          <span class="function-name">次数排名</span>
          <div class="arrow-container">
            <!-- 向右单箭头 -->
            <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5L16 12L8 19" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </div>

        <!-- 功能项 2 -->
        <div class="function-item" @click="toNext_2">
          <div class="icon-wrapper">
            <img src="../../static/image/img/2192.png" alt="角色切换图标" class="icon-img">
          </div>
          <span class="function-name">角色切换</span>
          <div class="arrow-container">
            <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5L16 12L8 19" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </div>

        <!-- 功能项 3 -->
        <div class="function-item" @click="toNext_3">
          <div class="icon-wrapper">
            <img src="../../static/image/img/2193.png" alt="审批记录图标" class="icon-img">
          </div>
          <span class="function-name">审批记录</span>
          <div class="arrow-container">
            <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5L16 12L8 19" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </div>

        <!-- 功能项 4 -->
        <div class="function-item" @click="toNext_5">
          <div class="icon-wrapper">
            <img src="../../static/image/img/2194.png" alt="实时请假状态图标" class="icon-img">
          </div>
          <span class="function-name">实时请假状态</span>
          <div class="arrow-container">
            <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5L16 12L8 19" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </div>

        <div class="function-item" @click="toNext_4">
          <div class="icon-wrapper">
            <img src="../../static/image/img/2194.png" alt="次数排名图标" class="icon-img">
          </div>
          <span class="function-name">添加家庭联系人</span>
          <div class="arrow-container">
            <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5L16 12L8 19" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>


<style scoped>
.mobile-page {
  max-width: 375px;
  margin: 0 auto;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
.function-list {
  padding: 0;
  margin: 0;
}
.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  margin-bottom: 8px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.icon-wrapper {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  flex-shrink: 0;
}
.icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.function-name {
  font-size: 15px;
  color: #333;
  flex-grow: 1; /* 让文字区域占据中间所有空间 */
}
.arrow-container {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 防止箭头容器被压缩 */
}
.function-item:active {
  background-color: #f0f0f0;
  transform: scale(0.99);
}
</style>
